<!-- 修改多条数据 -->
<template>
	<div>
		<my-dialog @cancel="onCloseDialog" @confirm="submitForm" title="用药" :visible.sync="visible" width="1200px"
			:fullscreen="true" append-to-body>
			<!-- <el-form ref="form-data" :model="form" :rules="rules" label-width="130px">
        <el-form-item label="手术记录id" prop="patientSurgeryId">
          <el-input v-model="form.patientSurgeryId" placeholder="请输入手术记录id" />
        </el-form-item>
      </el-form> -->
			<div class="content">
				<!-- 左侧 -->
				<div class="left">
					<el-row>
						<!-- <el-checkbox v-model="checked">全选</el-checkbox> -->
						&nbsp;
						<el-input style="width: 200px;" placeholder="请输入内容" v-model="input1">
							<template slot="prepend">简拼</template>
						</el-input>
						&nbsp;
						<el-button>刷新</el-button>
					</el-row>
					<br />
					<!-- 表格部分 -->
					<div style="padding-bottom: 1px;border-bottom: 1px solid #909399;">
						<el-table max-height="250" ref="multipleTable" :data="tableData" tooltip-effect="dark"
							style="width: 100%" @selection-change="handleSelectionChange">
							<el-table-column type="selection" width="55">
							</el-table-column>
							<el-table-column prop="address" label="全选" show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="name" label="" width="120">
							</el-table-column>
						</el-table>
						<!-- 分页符 -->
						<div class="block">
							<el-pagination small layout="prev, pager, next" :total="500">
							</el-pagination>
						</div>
					</div>
					<br />
					<!-- 表单 -->
					<div style="padding-bottom: 5px;border-bottom: 1px solid #909399;">
						<el-form ref="form-data" :model="form" :rules="rules" style="height: 250px;overflow-y: scroll;">
							<el-form-item label="特殊资源">
								<el-radio-group v-model="form.resource">
									<el-radio label="单次"></el-radio>
									<el-radio label="持续"></el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="编码" prop="patientSurgeryId">
								<el-input style="width: 60%;" v-model="form.patientSurgeryId" placeholder="请输入编码" />
							</el-form-item>
							<el-form-item label="名称" prop="patientSurgeryId">
								<el-input style="width: 60%;" v-model="form.patientSurgeryId" placeholder="阿托品注射液" />
							</el-form-item>
							<el-form-item label="给药方式" prop="patientSurgeryId">
								<el-select style="width: 60%;" v-model="form.region" placeholder="请选择给药方式">
									<el-option label="区域一" value="shanghai"></el-option>
									<el-option label="区域二" value="beijing"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="给药原因" prop="patientSurgeryId">
								<el-input style="width: 60%;" v-model="form.patientSurgeryId" placeholder="请输入给药原因" />
							</el-form-item>
							<el-form-item label="计量" prop="patientSurgeryId">
								<el-input style="width: 30%;" v-model="form.patientSurgeryId" placeholder="请输入给药原因" />
								/
								<el-select style="width: 20%;" v-model="form.region" placeholder="ml">
									<el-option label="mg" value="shanghai"></el-option>
									<el-option label="ml" value="beijing"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="流速浓度" prop="patientSurgeryId">
								<el-input style="width: 20%;" type="number" v-model="form.patientSurgeryId"
									placeholder="" />
								<el-select style="width: 20%;" v-model="form.region" placeholder="ml">
									<el-option label="mg" value="shanghai"></el-option>
									<el-option label="ml" value="beijing"></el-option>
								</el-select>
								<el-date-picker style="width:40%;" v-model="value1" type="datetime" placeholder="时间">
								</el-date-picker>
							</el-form-item>
						</el-form>
					</div>
					<br />
					<!-- 底部按钮 -->
					<el-row>
						<el-button>混合用药</el-button>
						&nbsp;
						<el-button>保存</el-button>
						&nbsp;
						<el-button>重置</el-button>
					</el-row>
				</div>
				<!-- 分界线 -->
				<div style="padding:5px;">&nbsp;</div>
				<!-- 右侧 -->
				<div class="right">
					<el-table :data="tableData" border style="width: 100%" max-height="650px">
						<el-table-column fixed prop="address" label="药物">
						</el-table-column>
						<el-table-column fixed prop="name" label="分量">
						</el-table-column>
						<el-table-column fixed prop="date" label="日期" width="155">
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="170">
							<template slot-scope="scope">
								<el-button type="text" size="small" icon="el-icon-edit">编辑</el-button>
								<el-button type="text" size="small" icon="el-icon-delete">删除</el-button>
								<el-button type="text" size="small" icon="el-icon-document-copy">复制</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</my-dialog>
	</div>
</template>
<script>
	export default {
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			getPage: {
				type: Function,
				default: null
			}
		},
		data() {
			return {
				currentPage: 5,
				value1: '',
				// 表单参数
				id: null,
				form: {
					id: null,
					patientSurgeryId: null,
				},
				// 表单校验
				rules: {
					patientSurgeryId: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}, ],
				},
				multipleSelection: [], //选择的数据
				tableData: [{
					name: '500ml',
					address: '0.9%氯化钠-科伦软袋',
					date: '2016-05-03 15:00:00'
				}, {
					name: '500ml*4.5g',
					address: '0.9%氯化钠-齐都袋装双阀',
					date: '2016-05-03 15:00:00'
				}, {
					name: '250m*',
					address: '0.9%氯化钠-齐都软袋',
					date: '2016-05-03 15:00:00'
				}, {
					name: '250m*',
					address: '0.9%氯化钠-齐都软袋双阀',
					date: '2016-05-03 15:00:00'
				}, {
					name: '250ml*2.25g',
					address: '0.9%氯化钠-塑瓶'
				}, {
					name: '500m*',
					address: '0.9%氯化钠-塑瓶'
				}, {
					name: '250m*',
					address: '0.9%氯化钠-科伦袋装',
					date: '2016-05-03 15:00:00'
				}, {
					name: '500ml',
					address: '0.9%氯化钠-科伦软袋'
				}, {
					name: '500ml*4.5g',
					address: '0.9%氯化钠-齐都袋装双阀'
				}, {
					name: '250m*',
					address: '0.9%氯化钠-齐都软袋'
				}, {
					name: '250m*',
					address: '0.9%氯化钠-齐都软袋双阀'
				}, {
					name: '250ml*2.25g',
					address: '0.9%氯化钠-塑瓶'
				}, {
					name: '500m*',
					address: '0.9%氯化钠-塑瓶'
				}, {
					name: '250m*',
					address: '0.9%氯化钠-科伦袋装'
				}],
			}

		},
		methods: {
			init(id) {
				if (id) {
					this.id = id
				}
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			// 选择
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			// 弹窗关闭的回调
			onCloseDialog() {
				this.$emit('update:visible', false)
			},
			/** 提交按钮 */
			submitForm() {
				console.log(this.form);
				this.$refs["form-data"].validate(valid => {
					if (valid) {
						// 编辑
						if (this.id) {
							this.$modal.msgSuccess("修改成功");
							// 刷新列表
							this.getPage();
							this.onCloseDialog()
						} else {
							// 新增
							this.$modal.msgSuccess("新增成功");
							// 刷新列表
							this.getPage();
							this.onCloseDialog()
						}
					}
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;

		.left {

			width: 40%;
			height: 100%;
		}

		.right {
			width: 60%;
			height: 100%;
		}
	}
</style>